<style>

.layui-input-block {
  margin-left: 80px;
}
.layui-btn {
  margin-left: 10px;
}
.BloodSpiderGongNengQu_function-card {
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.BloodSpiderGongNengQu_function-header {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6e6e6;
}
.BloodSpiderGongNengQu_copy-content {
  background: #f8f8f8;
  padding: 15px;
  border-radius: 5px;
  margin: 15px 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Courier New', monospace;
}
</style>

<div id="BloodSpiderBox">
  <div class="BloodSpiderGongNengQu_function-card">
    <div class="BloodSpiderGongNengQu_function-header">功能列表</div>
    
    <!-- 功能0：根据子订单编号逆向查询关联订单 -->
    <div class="layui-form-item">
      <label class="layui-form-label">子订单编号</label>
      <div class="layui-input-block">
        <input type="text" id="BloodSpiderGongNengQu_SubOrderNo" name="subOrderNo" placeholder="请输入子订单编号" class="layui-input" style="width: 300px; display: inline-block;">
        <button class="layui-btn layui-btn-primary" id="BloodSpiderGongNengQu_GetRelatedOrderBtn">逆向查询关联订单</button>
      </div>
    </div>
    <!-- 功能1：获取订单详情 -->
    <div class="layui-form-item">
      <label class="layui-form-label">订单ID</label>
      <div class="layui-input-block">
        <input type="text" id="BloodSpiderGongNengQu_OrderId" name="orderId" placeholder="请输入订单ID" class="layui-input" style="width: 300px; display: inline-block;">
        <button class="layui-btn layui-btn-normal" id="BloodSpiderGongNengQu_GetOrderDetailBtn">获取订单详情</button>
      </div>
    </div>
    
    <!-- 功能2：接手订单 -->
    <div class="layui-form-item">
      <label class="layui-form-label">接手订单</label>
      <div class="layui-input-block">
        <input type="text" id="BloodSpiderGongNengQu_AcceptOrderId" name="acceptOrderId" placeholder="请输入要接手的订单ID" class="layui-input" style="width: 300px; display: inline-block;">
        <input type="password" id="BloodSpiderGongNengQu_PaymentPassword" name="paymentPassword" value="128524" placeholder="请输入支付密码（可选）" class="layui-input" style="width: 200px; display: inline-block; margin-left: 10px;">
        <button class="layui-btn layui-btn-danger" id="BloodSpiderGongNengQu_AcceptOrderBtn">接手订单</button>
      </div>
    </div>
    <!-- 预留扩展空间，后续功能将添加在此处 -->
  </div>
</div>

<!-- 订单详情模态框容器 -->
<div id="BloodSpiderGongNengQu_ModalContainer" style="display: none;">
  <div id="BloodSpiderGongNengQu_OrderDetailContent" class="BloodSpiderGongNengQu_copy-content">
    <!-- 订单信息将动态填充在此处 -->
  </div>
  <div style="text-align: right; margin-top: 10px;">
    <button class="layui-btn layui-btn-warm" id="BloodSpiderGongNengQu_CopyBtn">复制订单信息</button>
  </div>
</div>

<!-- 关联订单查询结果模态框容器 -->
<div id="BloodSpiderGongNengQu_RelatedOrderModalContainer" style="display: none;">
  <div id="BloodSpiderGongNengQu_RelatedOrderContent" class="BloodSpiderGongNengQu_copy-content">
    <!-- 关联订单信息将动态填充在此处 -->
  </div>
  <div style="text-align: right; margin-top: 10px;">
    <button class="layui-btn layui-btn-warm" id="BloodSpiderGongNengQu_CopyRelatedOrderBtn">复制关联订单信息</button>
  </div>
</div>

<script>
// 初始化layui组件
layui.use(['layer', 'form'], function() {
  var layer = layui.layer;
  var form = layui.form;
  var $ = layui.$;
  
  /**
   * 根据子订单编号逆向查询关联订单
   * 通过调用接口获取与子订单关联的主订单信息
   */
  function getRelatedOrderBySubOrderNo() {
    // 获取用户输入的子订单编号
    var subOrderNo = $('#BloodSpiderGongNengQu_SubOrderNo').val().trim();
    
    // 验证子订单编号是否为空
    if (!subOrderNo) {
      layer.msg('请输入子订单编号', {icon: 2});
      return;
    }
    
    // 显示加载中提示
    var loadingIndex = layer.load(2);
    
    // 调用根据子订单编号逆向查询关联订单接口
    axios.get('/api/order/sub/get_related_order/', {
      params: {
        sub_order_no: subOrderNo
      }
    })
    .then(function(response) {
      // 关闭加载提示
      layer.close(loadingIndex);
      
      // 检查响应状态
      if (response.data && response.data.code === 0 && response.data.data) {
        var relatedOrderData = response.data.data;
        
        // 格式化关联订单信息
        var formattedRelatedOrderInfo = formatRelatedOrderInfo(relatedOrderData);
        
        // 填充关联订单信息到模态框内容容器
        $('#BloodSpiderGongNengQu_RelatedOrderContent').text(formattedRelatedOrderInfo);
        
        // 显示模态框
        showRelatedOrderModal();
      } else {
        layer.msg('查询关联订单失败：' + (response.data ? response.data.message : '未知错误'), {icon: 2});
      }
    })
    .catch(function(error) {
      // 关闭加载提示
      layer.close(loadingIndex);
      
      // 显示错误信息
      console.error('查询关联订单出错：', error);
      layer.msg('查询关联订单时发生网络错误', {icon: 2});
    });
  }
  
  /**
   * 格式化关联订单信息
   * 将关联订单数据格式化为指定的文本格式
   * @param {Array} relatedOrderData - 关联订单数据数组
   * @returns {string} - 格式化后的关联订单信息文本
   */
  function formatRelatedOrderInfo(relatedOrderData) {
    var infoLines = [];
    
    // 遍历关联订单数据
    relatedOrderData.forEach(function(order, index) {
      infoLines.push('===== 关联订单 ' + (index + 1) + ' =====');
      infoLines.push('主订单ID：' + (order.order_id || ''));
      infoLines.push('');
      infoLines.push('子订单列表：');
      
      // 遍历子订单
      if (order.sub_orders && Array.isArray(order.sub_orders)) {
        order.sub_orders.forEach(function(subOrder, subIndex) {
          infoLines.push('  --- 子订单 ' + (subIndex + 1) + ' ---');
          infoLines.push('  子订单名称：' + (subOrder.sub_order_name || ''));
          infoLines.push('  子订单编号：' + (subOrder.sub_order_no || ''));
          infoLines.push('  子订单ID：' + (subOrder.sub_order_id || ''));
          infoLines.push('  创建时间：' + (subOrder.create_time || ''));
          infoLines.push('  更新时间：' + (subOrder.update_time || ''));
          infoLines.push('');
        });
      }
      
      infoLines.push('');
    });
    
    return infoLines.join('\n');
  }
  
  /**
   * 显示关联订单模态框
   */
  function showRelatedOrderModal() {
    // 使用Layui的layer.open方法显示模态框
    layer.open({
      type: 1,
      title: '关联订单信息',
      area: ['800px', 'auto'],
      content: $('#BloodSpiderGongNengQu_RelatedOrderModalContainer'),
      btn: [],
      success: function(layero, index) {
        // 复制按钮事件
        $('#BloodSpiderGongNengQu_CopyRelatedOrderBtn').on('click', function() {
          var textToCopy = $('#BloodSpiderGongNengQu_RelatedOrderContent').text();
          
          // 创建临时textarea元素进行复制
          var textarea = document.createElement('textarea');
          textarea.value = textToCopy;
          textarea.style.position = 'fixed';
          textarea.style.left = '-999999px';
          textarea.style.top = '-999999px';
          document.body.appendChild(textarea);
          textarea.focus();
          textarea.select();
          
          try {
            document.execCommand('copy');
            layer.msg('复制成功', {icon: 1});
          } catch (err) {
            layer.msg('复制失败，请手动复制', {icon: 2});
          } finally {
            document.body.removeChild(textarea);
          }
        });
      },
      end: function() {
        // 模态框关闭后的清理工作
        $('#BloodSpiderGongNengQu_CopyRelatedOrderBtn').off('click');
      }
    });
  }
  
  /**
   * 获取订单详情函数
   * 通过调用代练通API获取订单详情，并在模态框中显示
   */
  function getOrderDetail() {
    // 获取用户输入的订单ID
    var orderId = $('#BloodSpiderGongNengQu_OrderId').val().trim();
    console.log(orderId);
    
    // 验证订单ID是否为空
    if (!orderId) {
      layer.msg('请输入订单ID', {icon: 2});
      return;
    }
    
    // 显示加载中提示
    var loadingIndex = layer.load(2);
    
    // 调用获取订单详情接口
    axios.get('http://localhost:9902/api/dailiantong/get_order_detail/', {
      params: {
        order_id: orderId
      }
    })
    .then(function(response) {
      // 关闭加载提示
      layer.close(loadingIndex);
      
      // 检查响应状态
      if (response.data && response.data.code === 0 && response.data.data) {
        var orderData = response.data.data;
        
        // 检查所有关键字段是否为null
        var isOrderCanceled = isAllFieldsNull(orderData);
        
        if (isOrderCanceled) {
          // 订单已被取消
          layer.alert('该订单已被取消', {icon: 0});
        } else {
          // 格式化订单信息
          var formattedOrderInfo = formatOrderInfo(orderData);
          
          // 填充订单信息到模态框内容容器
          $('#BloodSpiderGongNengQu_OrderDetailContent').text(formattedOrderInfo);
          
          // 显示模态框
          showOrderDetailModal();
        }
      } else {
        layer.msg('获取订单详情失败：' + (response.data ? response.data.message : '未知错误'), {icon: 2});
      }
    })
    .catch(function(error) {
      // 关闭加载提示
      layer.close(loadingIndex);
      
      // 显示错误信息
      console.error('获取订单详情出错：', error);
      layer.msg('获取订单详情时发生网络错误', {icon: 2});
    });
  }
  
  /**
   * 检查订单是否已被取消
   * 如果所有关键字段值均为null，则判定该订单已被取消
   * @param {Object} orderData - 订单数据对象
   * @returns {boolean} - 订单是否已被取消
   */
  function isAllFieldsNull(orderData) {
    var fields = [
      orderData.Title,
      orderData.Game,
      orderData.Zone,
      orderData.Actor,
      orderData.GameAcc,
      orderData.GamePass,
      orderData.GameMobile,
      orderData.LeaveTime
    ];
    
    // 检查所有字段是否都为null或空
    return fields.every(function(field) {
      return field === null || field === undefined || field === '';
    });
  }
  
  /**
   * 格式化订单信息
   * 将订单数据格式化为指定的文本格式
   * @param {Object} orderData - 订单数据对象
   * @returns {string} - 格式化后的订单信息文本
   */
  function formatOrderInfo(orderData) {
    var infoLines = [
      '代练项目：' + (orderData.Title || ''),
      '游戏区：' + (orderData.Game || ''),
      '平台服：' + (orderData.Zone || ''),
      '角色名：' + (orderData.Actor || ''),
      '号主账号: ' + (orderData.GameAcc || ''),
      '号主密码：' + (orderData.GamePass || ''),
      '号主手机：' + (orderData.GameMobile || ''),
      '代练时间：' + (orderData.LeaveTime || '')
    ];
    
    return infoLines.join('\n');
  }
  
  /**
   * 显示订单详情模态框
   */
  function showOrderDetailModal() {
    // 使用Layui的layer.open方法显示模态框
    layer.open({
      type: 1,
      title: '订单详情',
      area: ['600px', 'auto'],
      content: $('#BloodSpiderGongNengQu_ModalContainer'),
      btn: [],
      success: function(layero, index) {
        // 复制按钮事件
        $('#BloodSpiderGongNengQu_CopyBtn').on('click', function() {
          var textToCopy = $('#BloodSpiderGongNengQu_OrderDetailContent').text();
          
          // 创建临时textarea元素进行复制
          var textarea = document.createElement('textarea');
          textarea.value = textToCopy;
          textarea.style.position = 'fixed';
          textarea.style.left = '-999999px';
          textarea.style.top = '-999999px';
          document.body.appendChild(textarea);
          textarea.focus();
          textarea.select();
          
          try {
            document.execCommand('copy');
            layer.msg('复制成功', {icon: 1});
          } catch (err) {
            layer.msg('复制失败，请手动复制', {icon: 2});
          } finally {
            document.body.removeChild(textarea);
          }
        });
      },
      end: function() {
        // 模态框关闭后的清理工作
        $('#BloodSpiderGongNengQu_CopyBtn').off('click');
      }
    });
  }
  
  /**
   * 隐藏订单详情模态框
   */
  function hideOrderDetailModal() {
    // 这个函数现在可能不需要，因为layer.open会自己处理关闭
    layer.closeAll();
  }
  
  /**
   * 接受订单函数
   * 调用接受订单接口，成功后调用获取订单详情函数
   */
  function acceptOrder() {
    // 获取用户输入的订单ID和支付密码
    var orderId = $('#BloodSpiderGongNengQu_AcceptOrderId').val().trim();
    var paymentPassword = $('#BloodSpiderGongNengQu_PaymentPassword').val().trim();
    
    // 验证订单ID是否为空
    if (!orderId) {
      layer.msg('请输入订单ID', {icon: 2});
      return;
    }
    
    // 显示加载中提示
    var loadingIndex = layer.load(2);
    
    // 调用接受订单接口
    axios.get('http://localhost:9902/api/dailiantong/accept_order/', {
      params: {
        order_id: orderId,
        payment_password: paymentPassword
      }
    })
    .then(function(response) {
      // 关闭加载提示
      layer.close(loadingIndex);
      
      // 检查响应状态
      if (response.data && response.data.code === 0) {
        // 接口调用成功
        layer.msg('接手订单成功', {icon: 1});
        
        // 立即调用获取订单详情的函数
        // 将接受订单的ID设置到获取详情的输入框中
        $('#BloodSpiderGongNengQu_OrderId').val(orderId);
        getOrderDetail();
      } else {
        // 接口调用失败
        layer.msg('接手订单失败：' + (response.data ? response.data.message : '未知错误'), {icon: 2});
      }
    })
    .catch(function(error) {
      // 关闭加载提示
      layer.close(loadingIndex);
      
      // 显示错误信息
      console.error('接手订单出错：', error);
      layer.msg('接手订单时发生网络错误', {icon: 2});
    });
  }
  
  // 绑定获取订单详情按钮事件
  $('#BloodSpiderGongNengQu_GetOrderDetailBtn').on('click', getOrderDetail);
  
  // 绑定接手订单按钮事件
  $('#BloodSpiderGongNengQu_AcceptOrderBtn').on('click', acceptOrder);
  
  // 为订单ID输入框添加回车事件
  $('#BloodSpiderGongNengQu_OrderId').on('keypress', function(e) {
    if (e.which === 13) { // 回车键的键码是13
      getOrderDetail();
    }
  });
  
  // 为接受订单的订单ID输入框添加回车事件
  $('#BloodSpiderGongNengQu_AcceptOrderId').on('keypress', function(e) {
    if (e.which === 13) { // 回车键的键码是13
      acceptOrder();
    }
  });
  
  // 为支付密码输入框添加回车事件
  $('#BloodSpiderGongNengQu_PaymentPassword').on('keypress', function(e) {
    if (e.which === 13) { // 回车键的键码是13
      acceptOrder();
    }
  });
  
  // 绑定根据子订单编号逆向查询关联订单按钮事件
  $('#BloodSpiderGongNengQu_GetRelatedOrderBtn').on('click', getRelatedOrderBySubOrderNo);
  
  // 为子订单编号输入框添加回车事件
  $('#BloodSpiderGongNengQu_SubOrderNo').on('keypress', function(e) {
    if (e.which === 13) { // 回车键的键码是13
      getRelatedOrderBySubOrderNo();
    }
  });
});
</script>